<template>
	<div class="hello_game">
		<router-view></router-view>
		<!--<div class="game_title clearfix">
			<span @click="goBack" class="left">返回</span>
			<div>我的比赛</div>

		</div>
		<div  class="my-container clearfix">
		  <div  class="all left">全部</div>
		  <div  class="mygame left" >我参赛的</div>
		  <div  class="mycare left" @click="goMycare">我关注的</div>
		</div>
		
		
		<div class="item-contant ">
			<div class="clearfix">
				<div class="contestant_title left">参赛名称：是明尼苏达健康 </div>
		  		<div class="right startstuat">进行中</div>
			</div>
			<div class="line"></div>
			<div class="game_contant">
				<div>比赛时间：2018年04月16号--2018年04月18号</div>
				<div>比赛地点：北京市朝阳区***</div>
				<div>提示：小牛队</div>
			</div> 
		  	<div class="line"></div>
		  	<div class="Contestant">参赛人员：李经、王旺、何杰、姜琦、吴克
		  		<button class="more right">更多></button>
		 	</div>  
		</div>
		<div class="item-contant ">
			<div class="clearfix">
				<div class="contestant_title left">参赛名称：是明尼苏达健康 </div>
		  		<div class="right startstuat">已报名</div>
			</div>
			<div class="line"></div>
			<div class="game_contant">
				<div>比赛时间：2018年04月16号--2018年04月18号</div>
				<div>比赛地点：北京市朝阳区***</div>
				<div>提示：小牛队</div>
			</div> 
		  	<div class="line"></div>
		  	<div class="Contestant">参赛人员：李经、王旺、何杰、姜琦、吴克
		  		<button class="more right">更多></button>
		 	</div>  
		</div>
		<div class="item-contant ">
			<div class="clearfix">
				<div class="contestant_title left">参赛名称：是明尼苏达健康 </div>
		  		<div class="right startstuat_end">已结束</div>
			</div>
			<div class="line"></div>
			<div class="game_contant">
				<div>比赛时间：2018年04月16号--2018年04月18号</div>
				<div>比赛地点：北京市朝阳区***</div>
				<div>提示：小牛队</div>
			</div> 
		  	<div class="line"></div>
		  	<div class="Contestant">参赛人员：李经、王旺、何杰、姜琦、吴克
		  		<button class="more right">更多></button>
		 	</div>  
		</div>-->
	</div>
</template>

<script>
	export default{
		methods:{
			goMycaregame:function(){
				this.$router.push({path:'/mycaregame'})
			},
			goTotal:function(){
				this.$router.push({path:'/mygametotal'})
			},
			goMyjoin:function(){
				this.$router.push({path:'/myjoin'})
			},
			goBack:function(){
				this.$router.push({path:'/myapp'})
			}
		}
	}
</script>

<style>
*{
	margin: 0;
	padding: 0;
}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}
.game_title{
	background: #4682B4;
	font-size: 0.4rem;
	color: #fff;
	padding: 20px ;
	
}
.game_title>div{
	text-align: center;
}
.line{
		height: 1px;
		background-color:#ddd;
		margin-top: 10px;
	}
	.my-container{
		width: 100%;
		padding: 10px 0;
    	border-bottom: 1px solid #ccc;
	}
	.all,.mygame,.mycare{
		width: 33%;
		font-size: 0.4rem;
		text-align: center;
	}
	.contestant_title{
		font-size: 0.3rem;
	}
	.item-contant{
		border: 1px solid #f3f3f3;
		margin: 10px;
		font-size: 0.4rem;
		padding: 10px;
	}
	.startstuat{
		background-color: 	#00BFFF;
		font-size: 0.2rem;
		padding: 5px 10px;
		border-radius: 5px;
		margin-top: 5px;
	}
	.startstuat_end{
		color: #CCCCCC;
	}
	.Contestant{
		font-size: 0.25rem;
		margin-top: 10px;
	}
	.game_contant{
		font-size: 0.3rem;
	}
	.game_contant>div{
		margin-top: 10px;
	}
	.more{
		background-color: #fff;	
		border: none;
	}
</style>